import { useState,useRef } from "react";

function ParentCom() {

    const [text,setText] = useState("");

    return (
        <div>
            <h2>我是父组件</h2>
            <p>{text}</p>
            {/* 把父组件的状态更改的方法传给子组件 */}
            <ChildCom setText={setText}/>
        </div>
    )
}

function ChildCom(props) {

    const textRef = useRef();

    function handleClick() {
        const value = textRef.current.value;
        // 调用父组件传来的更改状态的方法
        props.setText(value);
    }

    return (
        <div>
            <h2>我是子组件</h2>
            <input type="text" ref={textRef}/>
            <button onClick={handleClick}>提交</button>
        </div>
    )
}

export default ParentCom;